<!-- 预约车辆 - 预约车辆item -->
<template>
	<view>
		<uni-swipe-action ref="swipeAction">
			<uni-swipe-action-item v-for="(item, index) in listData" :right-options="options" :key="item.id"
				@change="swipeChange($event, index)" @click="swipeClick($event, item)">
				<view class="main-box-item">
					<view class="box-info">
						<view class="box-info-bottom">
							<view class="row1">
								<view class="option">
									<image class="" src="/static/img/icon/card.png" />
									{{item.code}}
								</view>
							</view>
							<view v-if="getLineStatus(item.code)">
								<view class="row2">
									<image class="" src="/static/img/icon/online.png" />
									状态：{{getLineStatus(item.code)==true?'在线':'离线'}}
								</view>
								<view class="row3">
									<image class="" :src="getElectricLeval(item.code)" />
									电量：{{ getElectricity(item.code)+'%'}}
								</view>
							</view>
							<view v-else>
								<view class="row2">
									<image class="" src="/static/img/icon/unline.png" />
									状态：{{getLineStatus(item.code)==true?'在线':'离线'}}
								</view>
							</view>
							<view class="row3">
								<image class="" src="/static/img/icon/icon_name.png" />
								备注名称：{{item.name}}
							</view>
						</view>

					</view>

				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	import {
		Platform,
		Storage_Key,
		ProjectStates,
		ProjectKeys,
		SideslipOptionsData
	} from '@/static/config.js';
	import {
		GetRecordState
	} from "@/common/util.js"
	import request from '@/common/request.js';
	export default {
		props: ['list', 'onlineList'], //数据数组
		computed: {
			wxUserInfo() {
				return this.$storage.get(Storage_Key.user_info, true);
			},

		},
		onLoad(options) {
			if (options && options.data) {}
			this.setListening(); // 设置监听
		},
		data() {
			return {
				listData: this.list,
				options: SideslipOptionsData,
				onlineData: this.onlineList
			}
		},
		mounted() {

		},
		methods: {
			// 设置监听
			setListening() {
				let _self = this;
				uni.$on('card-status-refresh', function(data) {
					if (data.key) {
						_self.getLineStatus(code);
						_self.getElectricity(code);
					} else {}
				})
			},
			getLineStatus(code) {
				let data = this.onlineList.filter(c => c.code == code)[0];
				return !!data ? data.online : false;
			},
			getElectricity(code) {
				let data = this.onlineList.filter(c => c.code == code)[0];
				return !!data ? data.electricity : "";
			},
			getElectricLeval(code) {
				let data = this.onlineList.filter(c => c.code == code)[0].electricity;
				let src = "/static/img/icon/batterylevel2.png";
				if (data <= 100 && data >= 80) {
					src = "/static/img/icon/batterylevel4.png";
				} else if (data >= 50 && data < 80) {
					src = "/static/img/icon/batterylevel3.png";
				} else if (data >= 20 && data < 50) {
				src = "/static/img/icon/batterylevel2.png";
				} else {
					src = "/static/img/icon/batterylevel1.png";
				}
				return src;
			},
			getRecordState(val) {
				return GetRecordState(val);
			},
			clickItem(item) {
				this.$emit('clickItem', item)
			},
			// 组件打开或关闭时触发，left\right\none
			swipeChange(e, index) {
				console.log('返回：', e);
				console.log('当前索引：', index);
			},
			// 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
			swipeClick(e, item) {
				let {
					content
				} = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '确定删除《' + item.code + '》卡片信息吗？',
						success: res => {
							if (res.confirm) {
								this.delCard(item);
							} else if (res.cancel) {}
						}
					});
				} else if (content.text === '修改') {

				} else {
					uni.showToast({
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					});
				}
			},


			//删除选中卡片数据
			delCard(val) {
				let _self = this;
				uni.showLoading({
					title: '删除...',
					mask: false
				});
				request({
					url: Platform.api_requestUrl + '/stp-card/DeleteById',
					data: {
						id: val.id
					},
					header: {
						'Accept': 'application/json',
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					method: 'POST',
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200 && res.data) {
						uni.$emit('card-list-refresh', {
							key: true,
							msg: ''
						})
					} else {
						uni.showModal({
							content: '删除失败',
							showCancel: false
						})
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showModal({
						content: '删除失败',
						showCancel: false
					})
				});
			},
		},
		watch: {
			list: {
				handler(item, index) { //监听到数据变化执行方法 
					this.listData = item;
				},
				deep: true // 深度监听父组件传过来对象变化 
			}
		}
	}
</script>

<style lang='scss'>
	.main-box-item {
		display: flex;
		align-items: center;
		width: calc(100% - 20px);
		height: 120px;
		background: #FFFFFF;
		/* box-shadow: 0px 2px 5px #F0F0F0; */
		/* border-radius: 4px; */
		vertical-align: middle;
		margin: 0px 10px;
		border-bottom-color: #E6E6E6;
		border-bottom-style: solid;
		border-bottom-width: 0.5px;
	}


	.box-info {
		flex: 1;
		padding: 5px;
		margin-left: 10px;
		width: calc(100% - 160px);
	}

	.box-info-item {
		/* height: 60px; */
		background: #FFFFFF;
		border-top-color: #e5e5e5;
		border-top-style: solid;
		border-top-width: 0.5px;
		padding: 5px 3px;
	}

	.box-info-title {
		/* display: bloc; */
		height: 25px;
		font-size: 17px;
		font-weight: bold;
		/* 	overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.box-info-title .state-img {
		width: 18px;
		height: 18px;
		margin-right: 10px;
	}

	.box-info-bottom {
		display: flex;
		flex-direction: column;

		/* margin-top: 15px; */
		/* padding: 2px 8px 2px 16px; */
		image {
			width: 16px;
			height: 16px;
			margin-right: 6px;
		}

		.left {
			font-size: 12px;
			max-height: 1.5rem;
			line-height: 20px;
			width: 40px;
			/* box-shadow: 0px 2px 5px #E5E5E5; */
			border-radius: 2px;
			text-align: center;
		}

		.row1 {
			display: flex;
			align-items: center;
			/* background: rgba(89, 96, 128, 0.1); */
			border-radius: 2px;
			margin: 1px 0;
			font-size: 12px;
			font-family: FZLanTingHei-M-GBK;
			font-weight: 600;
			line-height: 12px;
			color: #596080;

			.option {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.status {
				font-size: 22rpx;
				text-align: center;
				broder: 2rpx;
				border-width: 1rpx;
				border-style: solid;
				height: 38rpx;
				width: 90rpx;
				border-radius: 10rpx;
				color: $app-platform-color !important;
				border-color: $app-platform-color !important;
			}
		}

		.row2 {
			display: flex;
			align-items: center;
			font-size: 12px;
			font-weight: 400;
			line-height: 20px;
			color: #888888;
			margin: 1px 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 0.5;
		}

		.row3 {
			display: flex;
			align-items: center;
			font-size: 12px;
			font-weight: 400;
			line-height: 20px;
			color: #888888;
			margin: 1px 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 0.5;

			.right {
				flex: 1;
				text-align: right;
				font-size: 12px;
				font-weight: 400;
				line-height: 20px;
				color: #888888;

				.tit {
					width: 50px;
					float: right;
					text-align: center;
					/* border-radius: 50%; */
					border-radius: 100px;
					color: #ffffff;
				}
			}
		}



	}
</style>
